<template>
  <div class="statdata">
    <div class="top">
      <div class="header">
        <div class="left">
          <el-radio-group v-model="labelPosition" size="small">
            <el-radio-button label="left" >销量</el-radio-button>
            <el-radio-button label="right">销售额</el-radio-button>
          </el-radio-group>
        </div>
        <div class="right">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item>
              <el-select v-model="category.day" >
                <el-option :label="item.day" value="shanghai" v-for="item in category" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <Ve-Pie :data="chartData" :extend="pieExtend"></Ve-Pie>
    </div>
    <div class="down">
      <div class="title">
        <h4>全国销量分布图</h4>
      </div>
      <div class="map">
        <VeMap :data="mapData" :extend="mapExtend"></VeMap>
      </div>
    </div>
  </div>
</template>

<script>
import { getStatData } from "../../request/httpApi";
export default {
  data() {
    return {
      category:[
        {id:1,day:'今天'},
        {id:2,day:'昨天'},
        {id:3,day:'前3天'},
        {id:4,day:'前7天'},
        {id:5,day:'前14天'},
      ],
      labelPosition: "left",
      form: {
        region:'',
      },
      //饼图数据
      chartData: {
        // columns:['日期','访问用户'],
        // rows:[
        //     {'日期':'1/1','访问用户':1235},
        //     {'日期':'1/2','访问用户':1236},
        //     {'日期':'1/9','访问用户':1237},
        //     {'日期':'1/5','访问用户':1238},
        // ]
      },
      //地图数据
      mapData: {
        // columns: ["日期", "访问用户"],
        // rows: [
        //   { 日期: "1/1", 访问用户: 1235 },
        //   { 日期: "1/2", 访问用户: 1236 },
        //   { 日期: "1/9", 访问用户: 1237 },
        //   { 日期: "1/5", 访问用户: 1238 },
        // ],
      },
      //控制上方的图形
      pieExtend: {
        legend: {
          top: 10,
          right: 20,
          heigth: 100,
          width: 300,
          origin: "vertical",
        },
        series: {
          type: "pie",
          //饼图的半径  内半径和外半径
          radius: ["30%", "55%"],
          //第一个值是横坐标,第二是纵坐标
          center: ["30%", "50%"],
        },
      },

      mapExtend: {
       
        //隐藏头部图例
        legend: { show: false },
        //提示框
        tooltip: {
          formatter: " {b} <br /> {c}",
        },
        series: {
           type: "map",
          aspectScale: 0.85,
          zoom: 1.2,
          //隐藏图例小圆点
          showLegendSymbol: false,
          //隐藏城市名称
          label: {
            show: false,
          },
          //高亮状态下 不显示城市名
          emphasis: {
            label: {
              show: false,
            },
            //高亮状态的颜色
            itemStyle: {
              areaColor: "rgb(132,136,261)",
            },
          },
          //地图各省的边框线的颜色
          itemStyle: {
            borderColor: "#fff",
          },
        },
        //视觉映射图 地图左下角的图标
        visualMap: {
          type: "continuous",
          mix: 0,
          max: 1000000,
          //是否开启拉拽
          calculable: true,
          //地图的颜色
           inRange:{
              color: ['#fdc6c0', 'rgba(255, 74, 9,0.95)', '#a92c28'],
              
           }
        },
      },
    };
  },
  created() {
   getStatData().then((res) => {
      console.log(res.data);
      this.chartData = {
        columns: ["name", "sale_today"],
        rows: res.data.salePie,
      };

      this.mapData = {
        columns: ["areaName", "saleNum"],
        rows: res.data.saleMap,
      };
    });
  },

};
</script>

<style lang = "less">
.statdata {
  padding: 10px;
  background-color: #fff;
  .top {
    .header {
      display: flex;
      justify-content: space-between;
    }
  }
  .down {
    .title {
      border-top: 2px solid #ccc;
      text-align: center;
      h4 {
        padding-top: 10px;
        font-weight: 400;
      }
    }
  }
}
</style>